<template>
  <div class="test-form">
    <el-form ref="person" :model="person" label-width="auto" :rules="rules">
      <el-form-item label="姓名：" prop="name">
        <el-input v-model="person.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄：" prop="age">
        <!--        <el-input v-model.number="person.age"></el-input>-->
        <el-input-number
          controls-position="right"
          v-model="person.age"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="性别：" prop="sex">
        <el-switch
          v-model="person.sex"
          active-text="男"
          inactive-text="女"
        ></el-switch>
      </el-form-item>
      <el-form-item label="主修专业：" prop="major">
        <el-select v-model="person.major">
          <template v-for="(e, i) in majors">
            <el-option :key="i" :value="e.value" :label="e.text"> </el-option>
          </template>
        </el-select>
      </el-form-item>
      <!--      <el-form-item label="主修专业：" prop="major">-->
      <!--        <el-radio-group v-model="person.major">-->
      <!--          <template v-for="(e, i) in majors">-->
      <!--            <el-radio :key="i" :label="e.value">{{ e.text }}</el-radio>-->
      <!--          </template>-->
      <!--        </el-radio-group>-->
      <!--      </el-form-item>-->
      <el-form-item label="业务爱好：" prop="hobbies">
        <el-select v-model="person.hobbies" multiple>
          <template v-for="(e, i) in hobbyList">
            <el-option :key="i" :value="e.value" :label="e.text"> </el-option>
          </template>
        </el-select>
      </el-form-item>
      <!--      <el-form-item label="业务爱好：" prop="hobbies">-->
      <!--        <el-checkbox-group v-model="person.hobbies" multiple>-->
      <!--          <template v-for="(e, i) in hobbyList">-->
      <!--            <el-checkbox :key="i" :label="e.value"-->
      <!--              ><el-tag>{{ e.text }}</el-tag>-->
      <!--            </el-checkbox>-->
      <!--          </template>-->
      <!--        </el-checkbox-group>-->
      <!--      </el-form-item>-->
      <el-form-item label="生日：" prop="birthday">
        <el-date-picker
          type="datetime"
          v-model="person.birthday"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="电影时间段：" prop="birthday">
        <el-date-picker
          type="datetimerange"
          v-model="person.movieRange"
        ></el-date-picker>
      </el-form-item>
      <div>
        <el-button @click="$refs.person.resetFields()">重置</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
    </el-form>
    <el-button @click="$message.warning(JSON.stringify(selectedPersons))"
      >批量删除</el-button
    >
    <el-table
      :data="results"
      max-height="500px"
      stripe
      @selection-change="selectionChange"
    >
      <!--      <el-table-column type="index"></el-table-column>-->
      <el-table-column type="selection"></el-table-column>
      <el-table-column type="expand">
        <template #default="that">
          <el-descriptions border>
            <el-descriptions-item label="名字">{{
              that.row.name
            }}</el-descriptions-item>
            <el-descriptions-item label="专业">{{
              that.row.major
            }}</el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名字" width="100px"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        :formatter="formatSex"
      ></el-table-column>
      <el-table-column
        prop="birthday"
        label="生日"
        width="180px"
      ></el-table-column>
      <el-table-column label="专业" :formatter="formatMajor"></el-table-column>

      <el-table-column label="Operation" width="200px" fixed>
        <template #default="that">
          <el-button size="mini" type="warning" @click="open(that.row)"
            >编辑</el-button
          >
          <el-button size="mini" type="info">删除</el-button>
        </template>
        <span>dddd</span>
      </el-table-column>
    </el-table>
    <!--    data columns row cell -->
  </div>
</template>

<script>
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import New from './components/New.vue';
export default {
  name: "TestForm",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      majors: [
        { value: "tmgc", index: 0, text: "土木工程" },
        { value: "rjgc", index: 1, text: "软件工程" },
        { value: "htgc", index: 2, text: "航天航空" },
      ],
      hobbyList: [
        { value: "basketball", index: 0, text: "篮球" },
        { value: "football", index: 1, text: "足球" },
        { value: "pingpang", index: 2, text: "乒乓球" },
      ],
      person: {
        name: "",
        age: 0,
        sex: true,
        major: "htgc",
        hobbies: ["basketball", "football"],
        birthday: "2022-02-05T12:20:00",
        //  moveRange = null || ["2022-02-03","2022-03-15"]
        movieRange: null,
        // movieStartTime: "2022-02-05T12:20:00",
        // movieEndTime: "2022-02-08T12:20:00",
      },
      results: [
        {
          name: "张三",
          age: 20,
          sex: true,
          major: "htgc",
          birthday: "2022-02-05T12:20:00",
        },
        {
          name: "李四",
          age: 30,
          sex: false,
          major: "htgc",
          birthday: "2022-02-05T12:20:00",
        },
        {
          name: "王五",
          age: 40,
          sex: true,
          major: "tmgc",
          birthday: "2022-02-06T12:20:00",
        },
        {
          name: "王六",
          age: 20,
          sex: true,
          major: "tmgc",
          birthday: "2022-02-06T12:20:00",
        },
      ],
      selectedPersons: [],

      // rules: {
      //   username: [
      //     { required: true, message: "请输入账号", trigger: "blur" },
      //     {
      //       pattern: /^\w+$/,
      //       message: "请输入字母/数字/下划线",
      //       trigger: ["blur", "change"],
      //     },
      //     { validator: this.validateItem, trigger: "blur" },
      //   ],
      //   password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      // },
      rules: {
        name: [
          // { required: true, message: "请输入姓名", trigger: "blur" },
          // {
          //   pattern: /^[a-zA-Z0-9_]{5,12}$/,
          //   message: "请输入字母/数字/下划线长度在5-12之间",
          //   trigger: "blur",
          // },
          {
            validator: this.validateName,
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    submit() {
      this.$refs.person.validate((valid) => {
        if (valid) {
          console.log("post");
        } else {
          this.$message.warning("验证不通过请重新填写表单");
        }
      });
    },
    formatSex(row) {
      return row.sex ? "女" : "男";
    },
    formatMajor(row) {
      let s = this.majors.find((x) => x.value === row.major);
      return s ? s.text : "";
    },
    open(row) {
      this.$notify.success(JSON.stringify(row));
    },
    selectionChange(rows) {
      this.selectedPersons = rows;
    },
    // reset() {
    //   this.$refs.person.resetFields();
    // },
    // validateItem(rule, value, callback) {
    //         // callback 在所有分支都必须运行，区别在于是否有error参数
    //         let isExits = true
    //         if (isExits) {
    //                 callback(new Error('用户名已经存在'))
    //             } else {
    //                 callback()
    //         }
    // },
    validateName(rules, value, cb) {
      if (!this.person.name) {
        cb(new Error("用户名必须不为空"));
      }
      let regExp = /^[a-zA-Z0-9_]{5,12}$/;
      if (!regExp.test(this.person.name)) {
        cb(new Error("请输入字母/数字/下划线长度在5-12之间"));
      }
      cb();
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-form {
  width: 300px;
}
.test-form {
  display: flex;
  justify-content: space-around;
}
.el-table {
  max-width: 800px;
}
</style>
